<template>
   <div class="details-box">
      <m-header></m-header>
      <div class="subject-content">
         <!--面包屑-->
         <crumbs-nav v-if="getCrumbsName[1].NavName" :crumbs-nav="getCrumbsName"></crumbs-nav>
         <!--上半节内容-->
         <iphones-details-content-top v-if="written_message !== null"
                                      :written-message="written_message"
                                      ref="iphonesDetailsContentTop"
         >
         </iphones-details-content-top>
         <!--下面内容-->
         <iphones-details-content-t-bottom
            :faq-data="FAQ_DATA === null ? false : true"
            :commodity-detail="commodity_detail_data"
            :specification-data="specification_data"
            :faq="faq_data_data"
         >
         </iphones-details-content-t-bottom>
      </div>
      <m-footer></m-footer>
      <srcollTo></srcollTo>
   </div>
</template>

<script>
   import MHeader from '../header-nav/header-nav'
   import MFooter from '../meizu-footer-wrap/meizu-footer-wrap'
   import crumbsNav from '../../components/Crumbs-Nav/Crumbs-Nav'
   import iphonesDetailsContentTop from '../../components/iphones-details-content-top/iphones-details-content-top'
   import iphonesDetailsContentTBottom
      from '../../components/iphones-details-content-bottom/iphones-details-content-bottom'
   import {mapMutations, mapGetters} from 'vuex'

   export default {
      beforeRouteEnter(to, from, next) {
         next(async vm => {
         })
      },
      name: 'details_Box',
      data() {
         return {
            written_message: null,
            commodity_detail_mg_0: null,
            specification_arameter_data: null,
            FAQ_DATA: null,
            color_classification_img_1_0: null,
            commodity_detail_mg_1: null,
            color_classification_img_2_0: null,
            color_classification_img_2_1: null,
            color_classification_img_2_2: null,
            color_classification_img_2_3: null,
            commodity_detail_mg_2: null,
            commodity_detail: [],
            specification: [],
            FAQ: [],
            select: '',
            arr: null
         }
      },
      computed: {
         ...mapGetters([
            'getCrumbsName', 'userCollection', 'loginMessage'
         ]),
         commodity_detail_data() {
            return this.commodity_detail
         },
         specification_data() {
            return this.specification
         },
         faq_data_data() {
            return this.FAQ
         },
         _Select() {
            return this.select
         }
      },
      created() {
         this._initData()
      },
      methods: {
         async _initData() {
            let key = Object.keys(this.$data)
            let id = this.$route.params.id
            this._id = id
            let data = await this.$axios.get(`/apis/iphones_details/${id}`)
            if (data.data.code === 1 && data.data.success) {
               data.data.result.iphome.forEach((item, index) => {
                  key.forEach((items, indexs) => {
                     if (Object.keys(item)[0] === items) {
                        let ke = Object.keys(item)[0]
                        this.$data[items] = item[ke]
                     }
                  })
               })
            } else {
               console.log('没有请求到数据')
            }
            if (this.commodity_detail_mg_0[0].imgUrl.length) {
               let key = id + 'commodity_detail_mg_0'
               this._setDetailsData({key, data: this.commodity_detail_mg_0[0].imgUrl})
               this.commodity_detail = this._getDetailsData(key)
            }
            if (Object.keys(this.specification_arameter_data).length) {
               let key = id + 'specification_arameter_data'
               let arr = []
               Object.keys(this.specification_arameter_data).forEach((item, index) => {
                  arr.push(this.specification_arameter_data[item])
               })
               this._setSpecificationParameter({
                  key,
                  data: arr
               })
               this._getSpecificationParameter(key)
            }
            if (this.FAQ_DATA.length) {
               let key = id + 'FAQ_DATA'
               this._setFAQ_DATA({
                  key,
                  data: this.FAQ_DATA
               })
               this.FAQ = this._getFAQ_DATA(key)
            }

            let path = this.$route.path.split('/')[1]
            this._setCollectionData({
               id: this._id,
               path,
               data: {
                  written_message: this.written_message
               }
            })

            if (this.loginMessage.user) {
               let doc = await this.$axios.post('/apis/collection/collection', {
                  find: true,
                  id: this.loginMessage.user._id
               })
               if (doc.data.success) {
                  this.arr = doc.data.result.collections
               }
               // console.log(this.arr)
               if (this.arr[this._id]['select']) {
                  this.$nextTick(() => {
                     this.$refs.iphonesDetailsContentTop._CollectionDisplay()
                  })
               }
            }

            // console.log(this.userCollection)

            // if (data.data.result['select']) {
            //    setTimeout(() => {
            //       this.$refs.iphonesDetailsContentTop._CollectionDisplay()
            //    }, 20)
            // }
         },
         _getDetailsData(key) {
            return this.getDetailsData()({objName: key})
         },
         _getSpecificationParameter(key) {
            this.specification = this.getSpecificationParameter()({objName: key})
         },
         _getFAQ_DATA(key) {
            return this.getFAQ_DATA()({objName: key})
         },
         ...mapMutations({
            _setContentClose: 'content_close',
            _setDetailsData: 'detailsData',
            _setSpecificationParameter: 'SpecificationParameter',
            _setFAQ_DATA: 'FAQ_DATA',
            _setCollectionData: 'collectionData',
            setUserCollection: 'userCollection'
         }),
         ...mapGetters({
            getDetailsData: 'detailsData',
            getSpecificationParameter: 'SpecificationParameter',
            getFAQ_DATA: 'FAQ_DATA'
         })
      },
      components: {
         MHeader,
         MFooter,
         crumbsNav,
         iphonesDetailsContentTop,
         iphonesDetailsContentTBottom
      },
      watch: {
         $route: {
            handler(newVal, oldVal) {
               if (newVal.path.indexOf(this.$route.params.id) !== -1) {
                  // this._initData()
               }
            }
         }
      }
   }
</script>

<style scoped lang="stylus">
   .details-box
      background #fff
      .subject-content
         margin 0 auto
         min-height 500px
         width 1240px
</style>
